<template>
  <el-table :data="material_list" style="width: 100%" :stripe="true">
    <el-table-column min-width="26%" label="备件" prop="part.name" />
    <el-table-column min-width="26%" label="制造商参考编号" prop="provider.name" />
    <el-table-column min-width="13%" label="注意" prop="notice" />
    <el-table-column min-width="14%" label="数量" prop="number" />
    <el-table-column min-width="9%" label="库存" prop="part.number" />
    <el-table-column min-width="7%" label="库位" prop="part.storage_location">
      <!--      <template v-slot="{row}">-->
      <!--        {{pcatStorage[row.part.storage_location]}}-->
      <!--      </template>-->
    </el-table-column>
    <el-table-column min-width="10%">
      <template v-slot="scope">
        <el-button icon="el-icon-link" />
        <el-button icon="el-icon-delete" @click="remove(scope.$index, scope.row.id)" />
      </template>
    </el-table-column>
    <div slot="append">
      <el-form :model="data" inline>
        <el-input v-model="data.id" type="hidden" placeholder />
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label>
              <v-select v-model="data.part_id" action="part" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label>
              <v-select v-model="data.provider_id" action="provider" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label>
              <el-input v-model="data.notice" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label>
              <el-input-number v-model="data.number" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label>
              <el-button icon="el-icon-upload2" @click="save" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-table>
</template>

<script>
import API from '../../../api/asset/equipment/material'
import VSelect from '../../../components/select'
import { pcatStorage } from '../../../utils/options'
export default {
  name: 'EquipmentMaterial',
  components: { VSelect },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      material_list: [
        {
          'part': {
            'name': '油漆',
            'number': '20',
            'storage_location': '12-1-1'
          },
          'provider': {
            'name': '江苏力乐（PROVIDER1）'
          },
          'notice': '最重要的备件',
          'number': '10'

        }
      ],
      data: {
        equipment_id: this.value
      },
      pcatStorage
    }
  },
  watch: {
    value() {
      this.index()
    }
  },
  created() {
    this.index()
  },
  methods: {
    index() {
      API.index({ equipment_id: this.value }).then(response => {
        this.list = response.data.data
      })
    },
    save() {
      API[this.data.id ? 'update' : 'create'](this.data).then(() => {
        this.index()
      })
    },
    remove(index, id) {
      API.delete(id).then(() => {
        this.list.splice(index)
      })
    }
  }
}
</script>
